<template>
  <div id="page-message">
    <div class="page-search-list">
      <el-link :type="status == 0 ? 'primary' : 'info'" @click="changeStatus">
        {{ status == 0 ? '已读' : '未读' }}
      </el-link>
      <el-link type="primary" @click="changeSort" style="margin-left: 20px;">
        <i
          :class="sort ? 'el-icon-sort-up' : 'el-icon-sort-down'"
          :style="sort ? 'transform: rotateY(180deg)' : ''"
        ></i>
        时间{{ sort ? '升序' : '降序' }}
      </el-link>
      <el-link type="primary" @click="reset" style="margin-left: 20px;">
        重置
      </el-link>
    </div>
    <el-col style="display: flex; flex-direction: column; align-items: center;">
      <el-card
        shadow="hover"
        v-for="item in messageShow"
        style="margin-bottom: 15px; width: 100%;"
      >
        <ul style="text-align: left;">
          <li style="margin-bottom: 10px;">{{ item.sender }}：</li>
          <div class="singe-line">{{ item.content }}</div>
        </ul>
        <ul style="display: flex; justify-content: space-between;">
          <span style="line-height: 28px; color: #99a9bf; font-size: 12px;">
            {{ item.create_time }}
          </span>
          <el-button
            plain
            size="mini"
            :type="item.status === 0 ? 'primary' : 'info'"
            :disabled="item.status === 0 ? false : true"
          >
            已读
          </el-button>
        </ul>
      </el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageCount"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tatal"
        class="upload-list-pagination"
      ></el-pagination>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
      status: 0, // 0未读 1已读
      sort: false, // true就近 false就远
      messageInit: [
        {
          id: 1022,
          sender: '张三',
          content: '请前往3号楼进行核酸采集',
          status: 0,
          create_time: '2022-6-5 15:22:32',
        },
        {
          id: 1022,
          sender: '赵武',
          content: '6号楼明天开始停水一天，请各居民提前做好储水准备',
          status: 1,
          create_time: '2022-6-7 15:22:51',
        },
      ],
      messageShow: [],
    }
  },
  methods: {
    changeStatus() {
      this.status = this.status === 1 ? 0 : 1
      this.messageShow = this.messageInit.filter((item) => {
        return item.status === this.status
      })
    },
    changeSort() {
      if (this.sort) {
        this.messageShow.sort(
          (a, b) => new Date(a.create_time) - new Date(b.create_time),
        )
      } else {
        this.messageShow.sort(
          (a, b) => new Date(b.create_time) - new Date(a.create_time),
        )
      }
      this.sort = !this.sort
    },
    reset() {
      this.messageShow = JSON.parse(JSON.stringify(this.messageInit))
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  created() {
    this.messageShow = JSON.parse(JSON.stringify(this.messageInit))
  },
}
</script>

<style lang="less" scoped>
#page-message {
  background-color: white;
  .page-search-list {
    padding-right: 20px;
    text-align: right;
    background-color: white;
  }
}
.singe-line {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
</style>
